<template>
	<div class="section-three" :title="page_title">
		<div class="container-box width-visual text-center">
			<h1 class="common_title" @click="edit('title_1')" @mouseover="setActive($event)" @mouseout="cleanActive($event)">{{component.title_1}}<i></i></h1><img class="map-bg" src="../assets/YUEDUN_files/map_1a3738c2.png">
			<ul class="clearfix">
				<li class="col_3" v-for="(item, index) in component.elements" :key="item.title_1">
					<div class="con-box">
						<div class="con">
							<div class="font52 num" @click="edit('elements', index, 'title_1')" @mouseover="setActive($event)" @mouseout="cleanActive($event)">{{item.title_1}}<span class="font22" @click.stop="edit('elements', index, 'title_2')" @mouseover="setActive($event)" @mouseout="cleanActive($event)">{{item.title_2}}</span></div>
							<p class="color-gray font16" @click="edit('elements', index, 'title_3')" @mouseover="setActive($event)" @mouseout="cleanActive($event)">{{item.title_3}}</p>
						</div>
						<div class="hover-box">
							<div class="icon"><img src="" alt="优质教师"></div>
						</div>
					</div>
				</li>
			</ul>
			<div class="tips color-lgray font12">以上数据为内部统计数据</div><a href="/signup">
				<a :href="component.links[0].url">
					<div class="obtain-btn margin-auto" id="freeClickSignup">{{component.links[0].title}}</div>
				</a>
			</a>
		</div>
		<el-dialog title="编辑文本" :visible.sync="dialogVisible" width="20%" custom-class="mydialog">
			<el-input type="textarea" v-model="rawhtml" size="small" width="150px;"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editOK">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { Mixins } from "@/common/mixins";
	export default {
		mixins: [Mixins],
		props: ["pcomponent"],
		data() {
			return {
				component: this.pcomponent,
				dialogVisible: false,
				rawhtml: "",
				currentProp: "",
				page_title: this.$vnode.key,
			};
		},
		created() {
			console.log(this.$vnode.key + "子组件接收父组件值：", this.component);
		},
		methods: {},
	};
</script>
<style lang="less">
.mydialog {
	opacity: 70%;
}
</style>